<!--
元素显示模式：转换
    一种模式的元素需要另一模式的特性，就考虑转换
        链接a是行内元素，直接设置宽度、高度的话是无效的，
        但就是想要增加a的触发范围（即让宽度、高度有效），此时就可以考虑转换。
    display: block;         转为块元素
    display: inline;        转为行内元素
    display: inline-block;  转为行内块元素
-->

<style>
    a {
        /* 行内元素a --》块级元素 */
        display: block;
        /* 宽高生效 */
        width: 100px;
        height: 50px;
        background-color: cyan;
    }
    div {
        /* 块级元素div --》行内元素 */
        display: inline;
        /* 宽高不再生效 */
        width: 100px;
        height: 50px;
        background-color: blue;
    }
    span {
        /* 行内元素span --》行内块元素 */
        display: inline-block;
        /* 宽高生效 */
        width: 100px;
        height: 50px;
        background-color: purple;
    }
</style>

<a href="#">链接01</a><a href="#">链接02</a>

<div>hello</div><div>hello</div>

<span>world</span><span>world</span>